import { h } from 'vue';

const App = {
  render() {
    return h('div', {
      id: 'hello'
    }, [
      h('span', 'world')
    ])
  }
}

// h 渲染函数，生成下方的结构

// <div id="hello"><span>world</span></div>

// v-if="ok" ===> 如何渲染
const App1 = {
  render() {
    // v-if="ok"
    return this.ok ?
      h('div', { id: 'hello' }, [h('span', 'world')])
      : h('p', 'other barnch')
  }
}

// v-else-if="ok" ===> 如何渲染
const App2 = {
  render() {
    // v-else-if="ok
    return this.ok ?
      h('div', { id: 'hello' }, [h('span', 'world')])
      : this.otherCondition
        ? h('p', 'other barnch')
        : h('span')
  }
}

// v-for
const App3 = {
  render() {
    return this.list.map(item => {
      return h('div', { key: item.id }, item.text)
    })
  }
}

// slot

const Stack = {
  render() {
    // slot 如果存在，永远是一个数组
    const slot = this.$slots.default ? this.$slots.default() : [];

    return h('div', { class: 'stack' }, slot.map(child => {
      return h('div', { class: `mt-${this.$props.size}` }, [
        child
      ])
    }))
  }
}